<template>
  <div id="app">
    <h1>根组件 - {{ title }} - {{ $store.state.count }}</h1>
    <input :value="count" @input="handleInput" type="text">
    <input :value="title" @input="handleInput1" type="text">
    <ViewSon1Vue></ViewSon1Vue>
    <hr>
    <ViewSon2Vue></ViewSon2Vue>

  </div>
</template>

<script>
import ViewSon1Vue from './components/ViewSon1.vue'
import ViewSon2Vue from './components/ViewSon2.vue'
import { mapState } from 'vuex'
export default {
  name: 'app',
  created () {
    console.log(this.$store.state.count)
  },
  data: function () {
    return {

    }
  },
  computed: {
    ...mapState(['count', 'title'])
  },
  components: {
    ViewSon1Vue,
    ViewSon2Vue
  },
  methods: {
    handleInput1 (e) {
      const str = e.target.value
      this.$store.commit('cHandle', str)
    },
    handleInput (e) {
      const num = +e.target.value
      this.$store.commit('changeHandle', num)
    }

  }
}
</script>

<style>
    #app{
      width: 600px;
      margin: 20px auto;
      border: 3px solid #ccc;
      border-radius: 3px;
      padding: 10px;
    }
</style>
